<template>
  <pre
    class="coed-pre"
    v-html="hlStr"
  />
</template>
<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/a11y-dark.css'

export default {
  props: {
    code: {
      type: String,
      default: ''
    },
    language: {
      type: String,
      default: 'json'
    }
  },
  computed: {
    hlStr () {
      return hljs.highlight(this.language, this.code).value
    }
  }
}
</script>
<style scoped>
  .coed-pre {
    text-align: left;
  }
</style>
